<template>
  <div>
    <!-- 1. 初始化+头部改变颜色 -->
    <MyHeader :backgroundColor="'#1d7bff'" :color="'white'"></MyHeader>

    <div class="main">
      <!-- 定义对象obj 更方便，不然拿到每个值需要写5个 -->
      <MyGoods v-for="obj in list" :key="obj.id" :goodsObj="obj"></MyGoods>
    </div>

    <!-- 9. 全选功能 -->
    <MyFooter :Arr="list"></MyFooter>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
import MyFooter from "./components/MyFooter";
import MyGoods from "./components/MyGoods";

export default {
  components: {
    MyHeader,
    MyFooter,
    MyGoods,
  },

  data() {
    return {
      list: [],
    };
  },

  // 6. 请求数据
  created() {
    // 注意：
    this.$axios({
      url: "https://www.escook.cn/api/cart",
    }).then((res) => {
      // console.log(res.data.list);
      this.list = res.data.list;
    });
  },
};
</script>

<style scoped>
/* 补充：不然固定定位会压住一部分 */
.main {
  padding: 45px 0 50px 0;
}
</style>